<template>
  <el-card>
    <el-row>
      <el-form :inline="true" :model="queryVo" size="default">
        <el-form-item label="用户编号">
          <el-input v-model="queryVo.createBy" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryVo.reqState" placeholder="请选择登录状态">
            <el-option
                v-for="item in stateOptions"
                :label="item.dictLabel"
                :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="getList">查询</el-button>
          <el-button size="small" type="default" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item/>
      </el-form>
    </el-row>

    <el-row>
      <el-popconfirm title="确定清空吗？" @confirm="logDelete">
        <template #reference>
          <el-button size="small" type="danger">
            <el-icon>
              <ele-Delete/>
            </el-icon>
            日志清空
          </el-button>
        </template>
      </el-popconfirm>
    </el-row>

    <el-row class="mt10">
      <el-table :data="logList"
                v-loading="loding"
      >
        <el-table-column prop="reqId" label="操作编号" align="center"/>
        <el-table-column prop="createBy" label="操作者ID" align="center"/>
        <el-table-column prop="reqMethod" label="请求方式" align="center"/>
        <el-table-column prop="ipAddr" label="IP" align="center"/>
        <el-table-column prop="reqTime" label="操作时间" align="center"/>
        <el-table-column prop="ipSources" label="操作地点" align="center"/>
        <el-table-column prop="systemName" label="系统名称" align="center"/>
        <el-table-column label="操作状态" align="center">
          <template #default="scope">
            <el-tag size="small"
                    v-for="(item,index) in stateOptions"
                    v-show="item.dictValue==scope.row.reqState"
                    :key="index"
                    :type="item.dictValue=='0'?'success':'warning'" v-text="item.dictLabel"></el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template #default="scope">
            <el-link type="primary" title="查看" @click="showDetailView(scope.row)" v-auth="'system-role-update'">
              <el-icon>
                <ele-View/>
              </el-icon>
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          class="mt15"
          style="justify-content: flex-end;"
          v-model:currentPage="queryVo.current"
          v-model:page-size="queryVo.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          small
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="getList"
          @current-change="getList"
      />
    </el-row>

    <el-dialog
        v-model="dialogVisible"
        top="20px"
        title="日志详情"
        width="30%"
    >
      <el-descriptions :column="1">
        <el-descriptions-item label="操作编号">{{ currentShowLog.reqId }}</el-descriptions-item>
        <el-descriptions-item label="操作者编号">{{ currentShowLog.createBy }}</el-descriptions-item>
        <el-descriptions-item label="请求接口">{{ currentShowLog.reqInter }}</el-descriptions-item>
        <el-descriptions-item label="请求参数">{{ currentShowLog.reqParams }}</el-descriptions-item>
        <el-descriptions-item label="请求方式">{{ currentShowLog.reqMethod }}</el-descriptions-item>
        <el-descriptions-item label="请求时间">{{ currentShowLog.reqTime }}</el-descriptions-item>
        <el-descriptions-item label="客户端ip">{{ currentShowLog.ipAddr }}</el-descriptions-item>
        <el-descriptions-item label="操作地点">{{ currentShowLog.ipSources }}</el-descriptions-item>
        <el-descriptions-item label="浏览器">{{ currentShowLog.browerName }}</el-descriptions-item>
        <el-descriptions-item label="系统名称">{{ currentShowLog.systemName }}</el-descriptions-item>
        <el-descriptions-item label="响应时间">{{ currentShowLog.resTime }}</el-descriptions-item>
        <el-descriptions-item label="错误信息" v-if="currentShowLog.reqState=='1'">{{ currentShowLog.errParams }}</el-descriptions-item>
        <el-descriptions-item label="操作状态">
          <el-tag size="small"
                  v-for="(item,index) in stateOptions"
                  v-show="item.dictValue==currentShowLog.reqState"
                  :key="index"
                  :type="item.dictValue=='0'?'success':'warning'" v-text="item.dictLabel"></el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>

      </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup>
import {queryList,deleteReqLog} from "/@/api/system/log/reqlog";
import {ElMessage} from "element-plus";

const {proxy} = getCurrentInstance()
const queryVo =reactive({
  current:1,
  pageSize:10,
  createBy:undefined,
  reqState:undefined
})
const logList = ref([])
const loding=ref(true)
const dialogVisible=ref(false)
const total=ref(0)
const getList= async ()=>{
  loding.value = true
  await queryList(queryVo).then(res => {
    logList.value = res.data.rows
    total.value=res.data.pageTotal
    loding.value = false
  })
}
const logDelete= async ()=>{
  await deleteReqLog().then(res => {
    ElMessage.success(res.msg)
    getList()
  })
}
const resetQuery=()=>{
  queryVo.createBy=undefined
  queryVo.reqState=undefined
  getList()
}
let currentShowLog=reactive({})


const stateOptions =ref([])
const showDetailView =(node)=>{
  currentShowLog.reqId = node.reqId
  currentShowLog.createBy = node.createBy
  currentShowLog.reqInter = node.reqInter
  currentShowLog.reqParams = node.reqParams
  currentShowLog.reqMethod = node.reqMethod
  currentShowLog.reqTime = node.reqTime
  currentShowLog.reqResult = node.reqResult
  currentShowLog.ipSources = node.ipSources
  currentShowLog.ipAddr = node.ipAddr
  currentShowLog.browerName = node.browerName
  currentShowLog.systemName = node.systemName
  currentShowLog.resTime = node.resTime
  currentShowLog.errParams = node.errParams
  currentShowLog.reqState = node.reqState
  dialogVisible.value = true
}

onBeforeMount(()=>{
  proxy.$dictOptions('system_sucess_fail').then(res => {
    stateOptions.value = res.data
  })
  getList()
})

</script>

<style scoped>

</style>